<template>
	<view class="container">
		<scroll-view scroll-y="true" class="con">
			<view class="list lists u-flex u-flex-wrap">
				<view class="list-item list-items u-m-l-20 u-m-b-20 u-row-center u-flex u-col-center u-flex-col"
				      v-for="(item,index) in list" :key="item.id" @click="openDoorFn(item.id)"
				      :class="item.use_state_text == '忙碌'?'active':''"
				>
					<text class="u-m-b-20">{{item.item_code}}</text>
					<view>
						<text v-if="item.use_state == 1 && item.use_state_text == '忙碌'"  :class="item.use_state == 0 && item.use_state_text == '忙碌'?'blue':''">{{item.use_state_text}}</text>
						<text v-else-if="item.use_state == 0 && item.use_state_text == '忙碌'" :class="item.use_state == 0 && item.use_state_text == '忙碌'?'red':''">{{item.use_state_text}}</text>
						<text v-else>{{item.use_state_text}}</text>
						
						<!--						<image src="/static/img/detail/right.png" mode="widthFix"></image>-->
					</view>
				</view>
			</view>
		</scroll-view>
<!--		<view class="mask" v-if="isMask">-->
<!--			<view class="content">-->
<!--				<image src="/static/img/index/close.png" mode="widthFix" @click="close"></image>-->
<!--				<view class="tit">-->
<!--					{{dataInfo.name}}使用信息-->
<!--				</view>-->
<!--				<view class="list">-->
<!--					<view class="list-item">-->
<!--						<text>使用人</text>-->
<!--						<text v-if="dataInfo.nickname">{{dataInfo.nickname}}</text>-->
<!--						<text v-else>暂无</text>-->
<!--					</view>-->
<!--					<view class="list-item">-->
<!--						<text>电话</text>-->
<!--						<text v-if="dataInfo.mobile">{{dataInfo.mobile}}</text>-->
<!--						<text v-else>暂无</text>-->
<!--					</view>-->
<!--					<view class="list-item">-->
<!--						<text>电池状态</text>-->
<!--						<text v-if="dataInfo.use_state == 1">忙碌</text>-->
<!--						<text v-if="dataInfo.use_state == 0">在线</text>-->
<!--					</view>-->
<!--					<view class="list-item">-->
<!--						<text>使用人次</text>-->
<!--						<text>{{dataInfo.use_num}}</text>-->
<!--					</view>-->
<!--					<view class="list-item">-->
<!--						<text>使用时长</text>-->
<!--						<text>{{dataInfo.use_length}}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->
		<view class="maskDoor" v-if="showOpenDoor">
			<view class="content">
				<image src="/static/img/index/close.png" mode="widthFix" @click="close"></image>
				<view class="tit">
					是否开门?
				</view>
				<view class="list">
					<view class="list-item" @click="showOpenDoor = false">
						<text>否</text>
					</view>
					<view class="list-item" @click="openDoorFnSubmit('1')">
						<text>是</text>
					</view>
				</view>
			</view>
		</view>
<!--		<view class="maskFei" v-if="showOverOrder">-->
<!--			<view class="content">-->
<!--				<image src="/static/img/index/close.png" mode="widthFix" @click="close"></image>-->
<!--				<view class="tit">-->
<!--					结束订单后是否需要用户支付费用?-->
<!--				</view>-->
<!--				<view class="list">-->
<!--					<view class="list-item" @click="openDoorFnSubmit('2')">-->
<!--						<text>否</text>-->
<!--					</view>-->
<!--					<view class="list-item" @click="openDoorFnSubmit('1')">-->
<!--						<text>是</text>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->
	</view>
	
</template>

<script>
import {
	batteryDetail,
	batteryState, openDevice
} from '../../../api/api.js'
	export default {
		
		data() {
			return {
				isMask: false,
				device_id:'',
				list: [],
				
				dataInfo: {
					name:'',
					"nickname": "",
					"mobile": "",
					"use_state": "",
					"use_num": 0,
					"use_length": 0
				},
				showOpenDoor:false,
				showOverOrder:false
			}
		},
		onLoad(options) {
			this.device_id = options.device_id
			this.getInfo()
		},
		methods: {
			getInfo() {
				batteryDetail({
					device_id: this.device_id
				}).then(res => {
					console.log(res)
					this.list = res.data.list
				})
			},
			// open(id,name) {
			// 	this.isMask = true
			// 	batteryState({
			// 		device_item_id: id
			// 	}).then(res=>{
			// 		console.log(res)
			// 		this.dataInfo = res.data
			// 		this.dataInfo.name = name
			// 	})
			// },
			close(){
				this.showOpenDoor = false
			},
			openDoorFn(id){
				this.order_id = id;
				this.showOpenDoor = true;
			},
			openDoorFnSubmit(type) {
				openDevice({
					id:this.order_id,
					type:type
				}).then(res => {
					console.log(res)
					if(res.code == '1'){
						this.showOpenDoor = false;
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #fff;
		position: relative;
	}
	
	
	.con{
		width: 100%;
		height: 100%;
	}

	.list {
		width: calc(100%);
		padding: 0 30upx;
		background-color: #FFFFFF;

		.list-item {
			width: 100%;
			height: 100upx;
			border-bottom: 1upx solid #f4f4f4;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {}

			view {
				height: 100%;
				display: flex;
				align-items: center;
				
				image {
					width: 15upx;
					margin-left: 15upx;
				}
			}
		}
		.list-items{
			width: 17%;
			height: 200upx;
			border-radius: 20rpx;
			background: #fafafa;
			justify-content: center;
			view {
				height: auto;
				padding: 4rpx 20rpx ;
				border-radius: 20rpx;
				background: rgba(255,255,255,0.5);
				color: #999;
				.blue {
					color: #5bcfca;
				}
				
				.red {
					color: #e64340;
				}
				text {
					font-weight: normal;
					font-size: 28rpx;
					
				}
			}
			&.active{
				background: #fde2e2;
				color: #e64340;
				view {
					background: rgba(255,255,255,0.5);
				}
			}
			text {
				font-weight: bold;
				font-size: 36rpx;
			}
			
		}


	}
	.lists{
		width: 100%;
		padding:0;
		padding-top: 18px;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;

		.content {
			width: 560upx;
			height: 500upx;
			background-color: #FFFFFF;
			border-radius: 12upx;
			padding: 20px;

			image {
				width: 30upx;
			}

			.tit {
				width: 100%;
				text-align: center;
				font-size: 32upx;
				margin-bottom: 10upx;
				font-weight: bold;
			}

			.list {

				.list-item {
					height: 80upx;
					border-bottom: none;
				}
			}

		}
	}
	.maskDoor {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		
		.content {
			width: 560upx;
			height: 300upx;
			background-color: #FFFFFF;
			border-radius: 12upx;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			image {
				width: 30upx;
			}
			
			.tit {
				width: 100%;
				text-align: center;
				font-size: 32upx;
				margin-bottom: 10upx;
				font-weight: bold;
			}
			
			.list {
				display: flex;
				justify-content: space-around;
				.list-item {
					width: 48%;
					height: 76upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: none;
					color:#FFFFFF;
					background: #3eb9fe;
					border-radius: 30rpx;
					&:first-child{
						color:#999;
						background: transparent;
						border: 2rpx solid #999999;
					}
				}
			}
			
		}
	}
	.maskFei {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		
		.content {
			width: 560upx;
			height: 300upx;
			background-color: #FFFFFF;
			border-radius: 12upx;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			image {
				width: 30upx;
			}
			
			.tit {
				width: 100%;
				text-align: center;
				font-size: 32upx;
				margin-bottom: 10upx;
				font-weight: bold;
			}
			
			.list {
				display: flex;
				justify-content: space-around;
				.list-item {
					width: 48%;
					height: 76upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: none;
					color:#FFFFFF;
					background: #3eb9fe;
					border-radius: 30rpx;
					&:first-child{
						color:#999;
						background: transparent;
						border: 2rpx solid #999999;
					}
				}
			}
			
		}
	}
</style>
